import { defineComponent, shallowRef, defineAsyncComponent, ref } from 'vue'

// import BaseChoice from '../BaseChoice'
import DatePickerModule  from './date.vue';
import metaConfig from './meta.js'
import moment from 'moment'
// 引入中文
import 'moment/locale/zh-cn'
// 设置中文
moment.locale('zh-cn')

export const meta = metaConfig
/**
 * 支持配置：
 * 排列方式, layout
 */
export default defineComponent({
  name: 'DateModule',
  props: {
    type: {
      type: String,
      default: ''
    },
    field: {
      type: String,
      default: ''
    },
    value: {
      type: [Array, String, Date],
      default: () => {
        return ''
      }
    },
    layout: {
      type: String,
      default: 'vertical'
    },
    options: {
      type: Array,
      default: () => []
    },
    readonly: {
      type: Boolean,
      default: false
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    maxNum: {
      type: [Number, String],
      default: 1
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    // const disableState = computed(() => {
    //   if (!props.maxNum) {
    //     return false
    //   }
    //   return props.value.length >= +props.maxNum
    // })
    // const isDisabled = (item) => {
    //   const { value } = props
    //   return disableState.value && !includes(value, item.value)
    // }
    // const myOptions = computed(() => {
    //   const { options } = props
    //   return options.map((item) => {
    //     return {
    //       ...item,
    //       disabled: isDisabled(item)
    //     }
    //   })
    // })
    const onChange = (value) => {
      const key = props.field
      console.log('value', value)
      emit('change', {
        key,
        value
      })
    }
    // const handleSelectMoreChange = (data) => {
    //   const { key, value } = data
    //   emit('change', {
    //     key,
    //     value
    //   })
    // }

    // const selectMoreView = shallowRef(null)
    // if (props.readonly) {
    //   selectMoreView.value = defineAsyncComponent(
    //     () => import('@materials/questions/QuestionContainerB')
    //   )
    // } else {
    //   selectMoreView.value = defineAsyncComponent(
    //     () => import('@materials/questions/QuestionRuleContainer')
    //   )
    // }
    return {
      onChange,
      // handleSelectMoreChange,
      // myOptions,
      // selectMoreView
    }
  },
  render() {
    const { readonly, field, onChange, value, format } = this
    return (
      <div>
      <DatePickerModule
        type="date"
        name={field}
        readonly={readonly}
        placeholder="请选择日期"
        onChange={onChange}
        value={value}
        format={format}
      >
      </DatePickerModule>
      </div>
      
    )
  }
})
